<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="/css/pintuer.css">
        <link rel="stylesheet" href="/css/admin.css">
        <script src="/js/jquery.js"></script>
        <script src="/js/pintuer.js"></script>
        <script type="text/javascript" src="/js/axios.min.js"></script>
        <script type="text/javascript" src="/js/vue.js"></script>
        <script charset="utf-8" src="/kindeditor-all-min.js"></script>
        <script charset="utf-8" src="/lang/zh-CN.js"></script>
        <script>
            KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
            });
        </script>
        <style>
            #preview {
                border: 1px solid #ccc;
                width: 50%;
                height: 200px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
            }
        </style>
    </head>
    <body>
        <div class="panel admin-panel" id="category">
            <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>修改商品</strong></div>
            <div class="body-content">
                <form method="post" class="form-x" action="">
                    <div class="form-group">
                        <div class="label">
                            <label>商品标题: </label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-bind:value="item.itemTitle" name="title" id="title"
                                   data-validate="required:请输入商品标题"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>商品图片: </label>
                        </div>
                        <div class="field">
                            <img v-bind:src="item.itemImage" id="img_id" style="width: 100px">
                            <input type="file" @change="showImg()" id="img_file">
                        </div>
                    </div>

                    <if condition="$iscid eq 1">
                        <div class="form-group">
                            <div class="label">
                                <label>所属分类: </label>
                            </div>
                            <div class="field">
                                <select name="cid" class="input w50" id="categoryId">
                                    <option selected="selected" v-bind:value="item.categoryName">{{item.categoryName}}</option>
                                    <option v-for="category in categoryList" :value="category.categoryId">
                                        {{category.categoryName}}
                                    </option>
                                </select>
                                <div class="tips"></div>
                            </div>
                        </div>
                    </if>
                    <div class="form-group">
                        <div class="label">
                            <label>商品价格: </label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="item.itemPrice" name="title" id="price"
                                   data-validate="required:请输入商品价格"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>商品库存: </label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="item.itemInventory" name="title" id="inventory"
                                   data-validate="required:请输入商品库存"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>商品卖点: </label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="item.itemSellPoint" name="title" id="sellPoint"
                                   data-validate="required:请输入商品卖点"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label" >
                            <label>商品描述：</label>
                        </div>
                        <textarea id="editor_id" v-bind:value="item.itemDesc" name="content" style="width:700px;height:300px;">
                        </textarea>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label></label>
                        </div>
                        <div class="field">
                            <button class="button bg-main icon-check-square-o" type="submit" v-on:click="updateItem"> 提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script>
            var vue = new Vue({
                el: "#category",
                data: {
                    item:{},
                    categoryList: [],
                    newItem: 0,
                    hotItem: 0,
                    imgUrl: "",
                    itemDesc:null
                },
                methods: {
                    findItem:function(){
                        debugger
                        var id= window.location.href.split("?")[1].split("=")[1];
                        let url = "/item/findItem?itemId="+id;
                        axios.get(url)
                        .then(function (result) {
                            debugger;
                            this.vue.item = result.data;
                        })
                        .catch();
                    },
                    findCategory: function () {
                        let url = "/category/findCategory";
                        axios.get(url)
                            .then(function (result) {
                                this.vue.categoryList = result.data;
                            })
                            .catch();
                    },
                    updateItem: function () {
                        debugger;
                        let url = "/item/addItem";
                        let itemList = [
                            {
                                itemTitle: $("#title").val(),
                                categoryId: $("#categoryId").find("option:selected").val(),
                                itemSellPoint: $("#sellPoint").val(),
                                itemPrice: $("#price").val(),
                                itemInventory: $("#inventory").val(),
                                itemImage: this.imgUrl
                            },
                            {
                                itemDesc: editor.html()
                            }
                        ];

                        axios.post(url, itemList)
                            .then(function (result) {
                                debugger;
                                if (result.data.status == 200) {
                                    window.alert("添加成功");
                                } else {
                                    window.alert("添加失败");
                                }
                            })
                            .catch();
                    },
                    showImg: function () {
                        debugger
                        var url = null;
                        var fileObj = document.getElementById("img_file").files[0];
                        if (window.createObjcectURL != undefined) {
                            this.imgUrl = window.createOjcectURL(fileObj);
                        } else if (window.URL != undefined) {
                            this.imgUrl = window.URL.createObjectURL(fileObj);
                        } else if (window.webkitURL != undefined) {
                            this.imgUrl = window.webkitURL.createObjectURL(fileObj);
                        }
                        console.log(this.imgUrl)
                        if (this.imgUrl) {
                            $('#img_id').attr('src', this.imgUrl)
                        }
                    }
                },
                mounted: function () {
                    this.findItem();
                    this.findCategory();
                }
            })
        </script>
    </body>
</html>